<template>
    <div class="homePage">
        <div class="left">
            <div class="left_header">
                <div class="left_header_head">
                    <i class="el-icon-info"></i>&nbsp;
                    <span>{{ leftData.a0 }}</span>
                </div>
                <div class="left_header_main">
                    <div class="left_header_main_head">
                        <span>{{ leftData.a1 }}</span>
                    </div>
                    <div class="left_header_main_foot">
                        <div class="left_header_main_foot_left">
                            {{ leftData.a2 }}
                        </div>
                        <div class="left_header_main_foot_right">
                            {{ mapPhoneNum[this.phoneNum] }}
                        </div>
                    </div>
                </div>
                <div class="charts">
                    <div class="charts_header_left">
                        <span class="charts_header_left_l">各等级报警情况</span>
                        <span>报警总数20</span>
                    </div>
                    <div class="charts_header_right">
                        <span class="charts_header_left_r">站内设备情况</span>
                        <span>设备总数38</span>
                    </div>
                    <div id="left"></div>
                    <div id="right"></div>
                </div>
            </div>
            <div class="left_main">
                <div class="left_main_top">
                    <div class="left_main_top_top">
                        <i
                            :style="{ padding: '3px 5px' }"
                            class="el-icon-success
"
                        ></i
                        >{{ leftData.a4 }}
                    </div>
                    <div class="left_main_top_bottom">
                        正常
                    </div>
                </div>
                <div class="left_main_bottom">
                    <div class="left_main_bottom_left">
                        <span class="green"></span>
                        正常状态
                    </div>
                    <div class="left_main_bottom_right">
                        <span class="red"></span>
                        异常状态
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right_header">
                <div class="right_header_head">
                    <div class="right_header_head_left">
                        <i
                            class="el-icon-data-board
"
                        ></i>
                        实时环境检测
                    </div>
                    <div class="right_header_head_right">
                        <span class="month">{{ time.month }}</span>
                        <span class="day">{{ dayArr[time.day] }}</span>
                        <span class="time">{{ time.time }}</span>
                    </div>
                </div>
                <div class="right_header_main">
                    <div class="right_header_main_top">
                        <div class="item">
                            <div class="circle">
                                <i
                                    class="iconfont icon-daqiwendu
"
                                ></i>
                            </div>

                            温度：{{ dataDev.temp + "℃" }}
                        </div>
                        <div class="item">
                            <div class="circle">
                                <i
                                    class="iconfont icon-shidu
"
                                ></i>
                            </div>
                            湿度：{{ dataDev.hum + "%RH" }}
                        </div>

                        <div class="item">
                            <div class="circle">
                                <i class="iconfont icon-jianzhuanquan"></i>
                            </div>
                            噪音：{{ dataDev.noise + "dB" }}
                        </div>
                    </div>
                    <div class="right_header_main_bottom">
                        <div class="item one">
                            <div class="circle">
                                <i
                                    class="iconfont icon-kongqizhiliangjiance"
                                ></i>
                            </div>
                            <div>空气质量</div>
                            <div class="ts">
                                <div class="item_top">PM2.5</div>
                                <div class="item_bottom">10μg/m3</div>
                            </div>
                            <div class="ts">
                                <div class="item_top">PM10</div>
                                <div class="item_bottom">11μg/m3</div>
                            </div>
                            <div class="ts">
                                <div class="item_top">CO</div>
                                <div class="item_bottom">0ppm</div>
                            </div>
                            <div class="ts">
                                <div class="item_top">CO₂</div>
                                <div class="item_bottom">0ppm</div>
                            </div>
                            <div class="ts">
                                <div class="item_top">SO₂</div>
                                <div class="item_bottom">0ppm</div>
                            </div>
                        </div>
                        <div class="item">
                            <i class="iconfont icon-shuijin"></i>
                            &nbsp;水浸 &nbsp;正常
                        </div>
                        <div class="item">
                            <i class="iconfont icon-yanwubaojingqi"></i>
                            &nbsp;烟雾 &nbsp;正常
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_main">
                <div class="right_main_left">
                    <div class="right_header_head">
                        <div class="right_header_head_left">
                            <i
                                class="iconfont icon-alarm
"
                            ></i>
                            异常报警信息
                        </div>
                    </div>
                    <div class="right_main_context">
                        <div class="right_main_context_left">
                            今日报警总数

                            <span>0</span>
                        </div>
                        <div class="right_main_context_right">
                            历史报警总数
                            <span>6</span>
                        </div>
                    </div>
                    <div class="right_main_describe">
                        <div class="right_main_describe_header">
                            <div>设备</div>
                            <div>描述</div>
                            <div>时间</div>
                        </div>

                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>

                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                        <div class="right_main_describe_item">
                            <div>PSD4701</div>
                            <div>屏蔽门关门异常</div>
                            <div>{{ baojingtime }}</div>
                        </div>
                    </div>
                </div>
                <div class="right_main_right">
                    <div class="right_main_right_header">
                        <div class="right_header_head">
                            <div class="right_header_head_left">
                                <i
                                    class="el-icon-bangzhu
"
                                ></i>
                                4号线安全运营统计
                            </div>
                        </div>
                        <div class="main">
                            <div class="top">
                                4号线安全运营
                                <span>{{
                                    Math.floor(dateOperate.tian / 1000) % 10
                                }}</span>
                                <span>{{
                                    Math.floor(dateOperate.tian / 10000) % 10
                                }}</span>
                                <span>{{
                                    Math.floor(dateOperate.tian / 100) % 10
                                }}</span
                                ><span>{{
                                    Math.floor(dateOperate.tian / 10) % 10
                                }}</span>
                                <span>
                                    {{
                                        Math.floor(dateOperate.tian / 1) % 10
                                    }} </span
                                >天
                            </div>
                            <div class="bottom">
                                4号线安全运营
                                <span>{{
                                    Math.floor(dateOperate.gl / 1000000) % 10
                                }}</span
                                ><span>{{
                                    Math.floor(dateOperate.gl / 100000) % 10
                                }}</span
                                ><span>{{
                                    Math.floor(dateOperate.gl / 10000) % 10
                                }}</span>
                                <span>.</span
                                ><span>{{
                                    Math.floor(dateOperate.gl / 1000) % 10
                                }}</span
                                >万公里
                            </div>
                        </div>
                    </div>
                    <div class="right_header_head">
                        <div class="right_header_head_left">
                            <i
                                class="iconfont icon-quxianshangsheng
"
                            ></i>
                            机房健康变化趋势
                        </div>
                    </div>
                    <div id="main"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as dayjs from "dayjs";
import * as echarts from "echarts";
import { posix } from "path";
export default {
    data() {
        return {
            phoneNum: window.sessionStorage.getItem("phoneNum"),
            mapPhoneNum: {
                111: "综合工班",
                222: "青龙岗信号工班",
                333: "北雁湖信号工班",
                444: "南屏路信号工班",
                555: "尧渡河信号工班",
                888: "综保区信号工班",
            },
            leftData: {
                a0: "实时机房信息",
                a1: "合肥市",
                a2: "合肥轨道交通集团有限公司",
                a3: "综保区信号工班",
                a4: "设备房健康状态",
                a5: "正常状态",
                a6: "异常状态",
            },
            time: {
                month: "1",
                day: "2",
                time: "3",
            },
            dayArr: [
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六",
            ],
            dataDev: {
                temp: (Math.random() * 1 + 25).toFixed(1),
                hum: (Math.random() * 5 + 50).toFixed(1),
                noise: (Math.random() * 5 + 50).toFixed(1),
            },
            dateOperate: {
                tian:
                    425 +
                    dayjs(dayjs().format("YYYY-M-D")).diff("2023-2-23", "day"),
                gl:
                    1748234 +
                    dayjs(dayjs().format("YYYY-M-D")).diff("2023-2-23", "day") *
                        5800,
            },
            baojingtime: "2023-11-28 08:35",
            date: ["2020-09-16", "", "", ""],
            positionX: "",
            positionY: "",
        };
    },
    mounted() {
        let leftMain = document.querySelector(".left_main");
        leftMain.style.backgroundSize = "80%";
        let sum = 80;
        leftMain.addEventListener("mousewheel", (e) => {
            // 向下滑动
            if (e.deltaY < 0) {
                leftMain.style.backgroundSize = (sum = sum + 5) + "%";
            } else if (e.deltaY > 0) {
                leftMain.style.backgroundSize = (sum = sum - 5) + "%";
            }
        });
        let startX, startY;
        function moveXY(event) {
            let moveX = startX - event.clientX;
            let moveY = startY - event.clientY;
            // 这里有问题
            positionX = `calc(50% - ${moveX}px)`;
            positionY = `calc(50% - ${moveY}px)`;
            leftMain.style.backgroundPosition = `${positionX} ${positionY}`;
        }
        let positionX = "50%";
        let positionY = "50%";
        leftMain.addEventListener("mousedown", function(e) {
            startX = e.clientX;
            startY = e.clientY;
            leftMain.addEventListener("mousemove", moveXY);
        });
        leftMain.addEventListener("mouseup", function(e) {
            // leftMain.style.backgroundPosition = "50% 50%";
            leftMain.removeEventListener("mousemove", moveXY);
        });

        console.log(leftMain);
        this.time.month = dayjs().format("M月D日");
        this.time.day = new Date().getDay();
        this.time.time = dayjs().format("H:m:s");
        for (let i = 0; i < 4; i++) {
            this.date[i] = dayjs()
                .subtract(3 - i, "day")
                .format("YYYY-MM-DD");
        }
        setInterval(() => {
            this.time.month = dayjs().format("M月D日");
            this.time.day = new Date().getDay();
            this.time.time = dayjs().format("H:m:s");
            if (dayjs().format("H") == "3") {
                this.baojingtime = dayjs().format("YYYY-MM-DD HH-mm");
            }
            if (dayjs().format("H") == "0") {
                for (let i = 0; i < 4; i++) {
                    this.date[i] = dayjs()
                        .subtract(3 - i, "day")
                        .format("YYYY-MM-DD");
                }
            }
            this.dataDev.temp = (Math.random() * 1 + 25).toFixed(1);
            this.dataDev.hum = (Math.random() * 5 + 50).toFixed(1);
            this.dataDev.noise = (Math.random() * 5 + 50).toFixed(1);
        }, 1000);
        setInterval(() => {}, 10800000);
        setInterval(() => {
            this.dateOperate.tian++;
            this.dateOperate.gl += 5800;
        }, 86400000);
        this.drawLine();
        this.draw1();
        this.draw2();
    },
    methods: {
        drawLine() {
            var chartDom = document.getElementById("main");
            var myChart = echarts.init(chartDom);

            var option;
            option = {
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    boundaryGap: false,
                    type: "category",

                    data: this.date,
                },
                textStyle: {
                    color: "#fff",
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "机房健康指数",
                        data: [95, 97, 98, 96],
                        type: "line",
                        showSymbol: false,
                        color: "#79b4bc",
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "#448378" },
                                    { offset: 0.5, color: "#3f858d" },
                                    { offset: 1, color: "#249bb7" },
                                ]
                            ),
                        },
                    },
                ],
            };
            myChart.setOption(option);
        },
        draw1() {
            var chartDom = document.getElementById("left");
            var myChart = echarts.init(chartDom);

            var option;
            option = {
                legend: {
                    top: "30%",
                    right: "0",
                    orient: "vertical",
                    textStyle: {
                        color: "#fff",
                    },
                },
                color: ["#f90303", "#eba647", "#078de5"],
                // title: {
                //     text: "异常设备7%",
                //     x: "20%",
                //     y: "55%",
                //     textStyle: {
                //         color: "#c2c4d2",
                //         fontSize: "12",
                //     },
                // },
                // series: [
                // {
                //     center: ["26%", "60%"],
                //     type: "pie",
                //     radius: ["50%", "70%"],
                //     label: {
                //         show: false,
                //     },
                //     data: [
                //         { value: 12, name: "一级报警 12" },
                //         { value: 7, name: "二级报警 7" },
                //         { value: 1, name: "三级报警 1" },
                //     ],
                // },
                // ],
                series: [
                    {
                        type: "pie",
                        radius: ["50%", "70%"],
                        center: ["26%", "60%"],
                        label: {
                            show: false,
                            position: "center",
                            formatter(item) {
                                return (
                                    item.name.split(" ")[0] +
                                    Math.floor((item.value / 20) * 100) +
                                    "%"
                                );
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 12, name: "一级报警 12" },
                            { value: 7, name: "二级报警 7" },
                            { value: 1, name: "三级报警 1" },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        },
        draw2() {
            var chartDom = document.getElementById("right");
            var myChart = echarts.init(chartDom);

            var option;
            option = {
                legend: {
                    top: "30%",
                    right: "0",
                    orient: "vertical",
                    textStyle: {
                        color: "#fff",
                    },
                },
                color: ["#f70203", "#05fa0a"],
                series: [
                    {
                        type: "pie",
                        radius: ["50%", "70%"],
                        center: ["26%", "60%"],
                        label: {
                            show: false,
                            position: "center",
                            formatter(item) {
                                return (
                                    item.name.split(" ")[0] +
                                    Math.floor((item.value / 38) * 100) +
                                    "%"
                                );
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 12,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 3, name: "异常设备 3" },
                            { value: 35, name: "正常设备 35" },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        },
    },
};
</script>
<style lang="less" scoped>
.homePage {
    width: 100%;
    height: 100%;
    display: flex;
    #main {
        height: 60%;
    }
    .left {
        border-left: 0.3906vw solid #41445c;
        border-right: 0.3906vw solid #41445c;
        flex: 35;
        .left_header {
            box-sizing: border-box;
            box-shadow: 0px 0px 0.2344vw 0.2344vw #555;
            height: 55%;
            color: #fff;
            // background-color: rgba(0, 0, 0, 0.5);
            .left_header_head {
                padding: 0.7813vw 0;
                border-bottom: 0.3906vw solid #41445c;
                padding-left: 0.3906vw;
            }
            .left_header_main {
                box-sizing: border-box;
                padding: 0.7813vw;

                .left_header_main_head {
                    border-left: 0.2344vw solid #3c7dca;
                    padding-left: 0.3906vw;
                }
                .left_header_main_foot {
                    margin-top: 1.5625vw;
                    display: flex;
                    justify-content: space-around;
                    .left_header_main_foot_left {
                        padding: 0.0781vw 0.7813vw;
                        background-color: #363c4c;
                        border-radius: 0.625vw;
                    }
                    .left_header_main_foot_right {
                        padding: 0.0781vw 0.7813vw;
                        background-color: #363c4c;
                        border-radius: 0.625vw;
                    }
                }
            }
            .charts {
                height: calc(100% - 8.6vw);
                display: flex;
                position: relative;
                .charts_header_left {
                    box-sizing: border-box;
                    padding: 0.3813vw;
                    position: absolute;
                    width: 50%;
                    left: 0;
                    display: flex;
                    justify-content: space-between;
                    .charts_header_left_l {
                        color: #6bb89e;
                        font-size: 0.9375vw;
                        font-weight: 600;
                    }
                }
                .charts_header_right {
                    box-sizing: border-box;
                    padding: 0.3813vw;
                    position: absolute;
                    width: 50%;
                    right: 0;
                    display: flex;
                    justify-content: space-between;
                    .charts_header_left_r {
                        color: #6bb89e;
                        font-size: 0.9375vw;
                        font-weight: 600;
                    }
                }
                #left {
                    position: absolute;
                    width: 50%;
                    left: 0%;
                    bottom: 20%;
                    height: 55%;
                }
                #right {
                    position: absolute;
                    width: 50%;
                    right: 0%;
                    bottom: 20%;
                    height: 55%;
                }
            }
        }
        .left_main {
            height: 45%;
            background-image: url("../../assets/3d.png");
            background-repeat: no-repeat;
            background-position: calc(calc(50%)) 50%;
            background-size: 80%;
            position: relative;
            .left_main_top {
                height: 3.9063vw;
                position: absolute;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                // background-color: rgba(0, 0, 0, 0.5);
                top: 1.5625vw;
                left: 0.7813vw;
                .left_main_top_top {
                    padding: 0.2344vw;
                    background-color: #58eaad;
                }
                .left_main_top_bottom {
                    padding: 0.3906vw;
                }
            }
            .left_main_bottom {
                position: absolute;
                display: flex;
                justify-content: space-around;
                bottom: 0.7813vw;
                left: 0.7813vw;
                padding: 0.2344vw 0.3906vw;
                font-size: 0.9375vw;
                // background-color: rgba(0, 0, 0, 0.5);
                border-radius: 0.2344vw;
                .left_main_bottom_left {
                    .green {
                        display: inline-block;
                        width: 0.7813vw;
                        height: 0.7813vw;
                        background-color: #58eaad;
                        border-radius: 50%;
                    }
                }
                .left_main_bottom_right {
                    margin-left: 0.3906vw;
                    .red {
                        display: inline-block;
                        width: 0.7813vw;
                        height: 0.7813vw;
                        background-color: #c72144;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    .right {
        flex: 65;
        // background-color: #292f3b;
        .right_header {
            height: 25%;
            width: 100%;
            box-sizing: border-box;
            border-bottom: 0.3906vw solid #41445c;
            .right_header_head {
                padding: 0 0.7813vw;
                height: 17%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.5);
                .right_header_head_right {
                    display: flex;
                    span {
                        padding-left: 1.5625vw;
                    }
                }
            }
            .right_header_main {
                height: 83%;
                // background-color: #292f3b;
                display: flex;
                flex-direction: column;
                .right_header_main_top {
                    flex: 1;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    .item {
                        font-size: 0.9375vw;
                        position: relative;
                        height: 2.3438vw;
                        background-color: #3092f0;
                        border-radius: 0.3906vw;
                        line-height: 2.3438vw;
                        padding: 0.2344vw 1.5625vw;

                        .circle {
                            position: absolute;
                            height: 3.9063vw;
                            width: 3.9063vw;
                            top: -0.625vw;
                            left: -2.8906vw;
                            border-radius: 50%;

                            background-color: #41b4f6;
                            text-align: center;
                            i {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 100%;
                                height: 100%;
                                font-size: 2vw;
                            }
                        }
                    }
                }
                .right_header_main_bottom {
                    flex: 1;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    .item {
                        font-size: 0.9375vw;
                        position: relative;
                        height: 2.3438vw;
                        background-color: #3092f0;
                        border-radius: 0.3906vw;
                        line-height: 2.3438vw;
                        padding: 0.2344vw 1.5625vw;
                        display: flex;
                        justify-content: space-between;
                        i {
                            font-size: 2vw;
                        }
                        .circle {
                            position: absolute;
                            height: 3.9063vw;
                            width: 3.9063vw;
                            top: -0.625vw;
                            left: -2.8906vw;
                            border-radius: 50%;

                            background-color: #41b4f6;
                            text-align: center;
                            i {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 100%;
                                height: 100%;
                                font-size: 2vw;
                            }
                        }
                        .ts {
                            padding: 0 0.2344vw;
                            line-height: 1.1719vw;
                            display: flex;
                            flex-direction: column;
                            justify-items: center;
                            .item_top {
                                text-align: center;
                            }
                            .item_bottom {
                                text-align: center;
                            }
                        }
                    }
                    .one {
                        display: flex;
                        justify-content: space-around;
                        position: relative;
                        left: 0.7813vw;
                        width: 24.5938vw;
                    }
                }
            }
        }
        .right_main {
            width: 100%;
            height: 75%;
            display: flex;
            // background-color: #292f3b;
            .right_main_left {
                flex: 1;
                border-right: 0.1563vw solid #41445c;
                .right_header_head {
                    padding: 0 0.7813vw;
                    height: 7%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: rgba(0, 0, 0, 0.5);
                    .right_header_head_right {
                        display: flex;
                        span {
                            padding-left: 1.5625vw;
                        }
                    }
                }
                .right_main_context {
                    height: 25%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    span {
                        padding: 0 0.2344vw;
                        font-size: 2.3438vw;
                        font-family: "lcd";
                        color: #63d1ba;
                    }
                }
                .right_main_describe {
                    height: 68%;
                    box-sizing: border-box;
                    overflow: auto;
                    .right_main_describe_header {
                        display: flex;
                        background-color: #14171d;
                        line-height: 2.3438vw;
                        div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                    .right_main_describe_item {
                        display: flex;
                        div {
                            text-align: center;
                            padding: 0.3906vw;
                            width: 50%;
                        }
                        &:nth-child(2n-1) {
                            div {
                                background-color: #14171d;
                            }
                        }
                    }
                }
            }
            .right_main_right {
                flex: 1;
                // height: 100%;
                border-left: 0.1563vw solid #41445c;
                .right_header_head {
                    padding: 0 0.7813vw;
                    height: 10%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: rgba(0, 0, 0, 0.5);
                    .right_header_head_right {
                        display: flex;
                        span {
                            padding-left: 1.5625vw;
                        }
                    }
                }
                .right_main_right_header {
                    height: 30%;
                    .time {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 0.9375vw;
                        height: 30%;
                        border-bottom: 0.3906vw solid #41445c;
                    }
                    .right_header_head {
                        padding: 0 0.7813vw;
                        height: 30%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-color: rgba(0, 0, 0, 0.5);
                        border-bottom: 0.3906vw solid #41445c;
                        .right_header_head_right {
                            display: flex;
                            span {
                                padding-left: 1.5625vw;
                            }
                        }
                    }
                    .main {
                        display: flex;
                        flex-direction: column;
                        box-sizing: border-box;
                        justify-content: center;
                        padding: 0.7813vw;
                        border-bottom: 0.3906vw solid #41445c;
                        height: 70%;
                        background-color: rgba(22, 22, 22, 22, 0.5);

                        .top {
                            padding: 0.3906vw;
                            text-align: left;
                            span {
                                margin: 0 0.0781vw;
                                display: inline-block;
                                width: 1.3438vw;
                                text-align: center;
                                line-height: 1.3438vw;
                                background-color: rgba(12, 31, 89, 0.5);
                                font-family: "lcd";
                                font-size: 2.3438vw;
                                padding: 0.3906vw;
                                color: #58eaad;
                            }
                        }
                        .bottom {
                            padding: 0.3906vw;
                            text-align: left;
                            span {
                                margin: 0 0.0781vw;
                                display: inline-block;
                                width: 1.3438vw;
                                text-align: center;
                                line-height: 1.3438vw;
                                background-color: rgba(12, 31, 89, 0.5);
                                font-family: "lcd";
                                font-size: 2.3438vw;
                                padding: 0.3906vw;
                                color: #58eaad;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
